<template>
  <div class="alert-banner">
    <transition name="fade">
      <p :key="currentAlert">{{ currentAlert }}</p>
    </transition>
  </div>
</template>

<script>
export default {
  data() {
    return {
      alerts: ["Alert 1", "Alert 2", "Alert 3"], // 报警信息数组
      currentIndex: 0, // 当前显示的报警信息索引
    };
  },
  computed: {
    currentAlert() {
      return this.alerts[this.currentIndex];
    },
  },
  mounted() {
    this.startCarousel(); // 在组件挂载后开始轮播
  },
  methods: {
    startCarousel() {
      setInterval(() => {
        this.currentIndex = (this.currentIndex + 1) % this.alerts.length;
      }, 3000); // 每隔3秒更新当前报警信息索引
    },
  },
};
</script>

<style scoped>
.alert-banner {
  width: 100%;
  height: 50px;
  background-color: yellow;
  display: flex;
  align-items: center;
  justify-content: center;
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s;
}

.fade-enter,
.fade-leave-to {
  opacity: 0;
}
</style>
